<template>
<view>
	<backheader :title="title" :closecardflag="closecardflag" :checkflag="checkflag"></backheader>
	<view class="mainMenu">
		<view class="mmitem" :class="{mmactive: mmactiveflag === 1}"  @tap="changeMm(1)">待执行</view>
		<view class="mmitem" :class="{mmactive: mmactiveflag === 2}"  @tap="changeMm(2)">全部</view>
	</view>
	<view style="height: 72upx;" v-if="isShow">
		<ren-dropdown-filter :filterData='filterData' :defaultIndex='defaultIndex'
			@onSelected='onSelected'></ren-dropdown-filter>
	</view>
	<view class="content">
		<scroll-view scroll-y="true" style="height: calc(100vh - 330upx);" @scrolltolower="loadMore">
			<view class="conItem" v-for="(item,index) in dataList" :key="item.otId" @tap="goItem(item.otId)">
				<view class='top'>
					<view class='title'>
						{{item.opContent}}
					</view>
					<view class='message'>
						<view class='left'>
							{{item.otTypeId}}
						</view>
						<view class='center'>
							{{item.otTypeName}}
						</view>
						<view class='right'>
							{{stateInfo[item.state?item.state:1]}}
						</view>
					</view>
				</view>
				<view class='bottom'>
					<view class='one'>
						<view class='left'>
							设备位置
						</view>
						<view class='center'>
							{{item.assetId}}
						</view>
						<view class='right'>
							{{item.assetName}}
						</view>
					</view>
					<view class='two'>
						<view class='left'>
							操作人/监护人
						</view>
						<view class='center'>
							{{item.operator1Name}}/
							{{item.guarder1Name}}
						</view>
						<view class='right'>
							{{item.operator2Name}}/
							{{item.guarder2Name}}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</view>
</template>
 	<script>
		import backheader from "@/components/backHeader/backHeader.vue";
		import { stationList } from '@/api/common.js'
		import { getTicketPage, getPendingTasks, otType } from '@/api/operationPicket.js'
			export default {
				data() {
					return {
						isShow: false,
						closecardflag:true,
						title:"操作票列表",
						checkflag:false,
						mmactiveflag:1,
						allPages: 0,
						filterData:[
								[{text: '操作票类型', value: ''}],
								[{ text: '场站', value: '' }],
								[
									{ text: '状态', value: '' },
									{ text: '待执行', value: 4 },
									{ text: '拟定', value: 1 }, 
									{ text: '审核中', value: 2 }, 
									{ text: '已作废', value: 3 },
									{ text: '执行中', value: 5 },
									{ text: '已执行', value: 6 },
									{ text: '终止执行', value: 7 },
									{ text: '关闭（合格', value: 8 },
									{ text: '关闭（不合格）', value: 9 }
								]
						],
						defaultIndex:[0,0,1],
						dataList: [],
						filterForm: {
							status: 4,
							current: 1,
							otTypeId: '',
							operationDeptId: '',
							size: 20
							
						},
						stateInfo: {
							1:'拟定',
							2:'审核中',
							3:'已作废',
							4:'待执行',
							5:'执行中',
							6:'已执行',
							7:'终止执行',
							8:'关闭（合格）',
							9:'关闭（不合格）'
						}
					}
				},
				components:{
					backheader
				},
				onLoad() {
					this.init()
				},
				methods: {
					async init() {
						await this.getStation()
						await this.otTypeList()
					},
					changeMm(index){
						this.isShow = false
						console.log(index)
						if(index==1){
							this.defaultIndex = [0,0,1]
							this.mmactiveflag = 1
							this.filterForm = {
								current: 1,
								size: 20,
								status: 4
							}
							this.setTicketPage()
						}else if(index == 2){
							this.defaultIndex = [0,0,0]
							this.mmactiveflag = 2
							this.filterForm = {
								current: 1,
								size: 20
							}
							this.setTicketPage()
						}
						setTimeout(() => {
							this.isShow = true
						})
					},
					goItem(id){
						 uni.navigateTo({
							url:'/pages/twotickets/operationPicket/operationInfo/index?id='+id
						});
					},
					loadMore() {
						if (this.allPages === this.filterForm.current) {
							return
						}
						this.filterForm.current++
						this.setTicketPage()
					},
					onSelected(val) {
						this.filterForm.otTypeId = val[0][0].value
						this.filterForm.operationDeptId = val[1][0].value
						this.setTicketPage()
					},
					setTicketPage(){
						console.log(this.filterForm, 44444)
						getTicketPage(this.filterForm).then(res=>{
							if(res.success) {
								if (this.filterForm.current === 1) {
									this.dataList = res.result.result.records
								} else {
									this.dataList= this.dataList.concat(res.result.result.records)
								}
								this.allPages = res.result.result.pages
							}
						})
					},
					// 场站
					getStation() {
						stationList({parameters: [{key: "key", value: "cz"}]}).then(res => {
							if(res.state === 200) {
								res.data.dataResult.forEach(item=> {
									this.filterData[1].push({text: item['NAME_'], value: item['ID_']})
								})
								this.filterForm.operationDeptId = this.filterData[1][0].value
								this.isShow = true
							}
						})
					},
					// 类型
					otTypeList(state){
						otType().then(res=>{
							if(res.success) {
								res.result.result.forEach(item=> {
									this.filterData[0].push({text: item.otTypeName, value: item.otTypeId})
								})
								this.filterForm.otTypeId = this.filterData[0][0].value
								this.isShow = true
							}
							this.setTicketPage(4)
						})
					}
				}
			}
		</script>
	<style lang="scss">
 	.mmactive{
 		border-bottom: solid 4upx #1E91E6;
 	}


 	.salfTitle{
 		display: flex;
 	
 	}
	.mainMenu{
		background-color: #fff;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		display: flex;
	}
	.mmitem{
		flex: 1;
		text-align: center;
		font-size: 28upx;
		color: #333333;
	}
	.content{
		width: 100%;
		background-color: #f6fafa;
		padding: 60upx 0;
		.conItem{
			width: 96%;
			margin-left: 2%;
			margin-top: 20upx;
			.top{
				padding: 30upx;
				background-color: #fff;
				border-radius: 5px 5px 15px 15px;
				.title{
					font-size: 35upx;
					color: #000;
				}
				.message{
					display: flex;
					align-items: center;
					justify-content: space-between;
						font-size: 25upx;
						margin-top: 10upx;
						.center{
							color: #10AEFF;
						}
						.right {
							color: #ff0000;
						}
				}
			}
			.bottom{
				padding: 20upx;
				background-color: #fff;
				border-radius: 15px 15px 5px 5px;
				margin-top: 1upx;
				.one{
					display: flex;
					padding: 20upx 0;
					    border-bottom: 1px solid #eee;
				}
				.two{
					display: flex;
					padding: 20upx 0;
					
				}
				.left{
					flex: 1;
					color: #aaa;
				}
				.center{
					flex: 2;
					color: #888;
				}
				.right{
					flex: 1;
					color: #666;
				}
			}
		}
		.conItem:nth-child(1){
			margin-top: 0;
		}
	}
 </style>